<template>
	<view class="flex-sb-c header">
		<view class="flex-fs-c plaque">
			<image class="logo" src="/static/logo.png" mode=""></image>
			<view class="name">满东排骨串</view>
		</view>
		<view class="">
			<uv-icon name="bell"></uv-icon>
		</view>
	</view>
	
	<view class="revenuePanel">
		<view class="subheading">本月营收</view>
		<view class="monthlyIncome">3782.50</view>
	
		<view class="see flex-fe-c"><text class="pr10">查看明细</text> <uv-icon  name="eye" color="#fff"></uv-icon></view>
		
		<view class="flex-sb-c index">
			<view class="flex1">
				<view class="subheading">今日新增订单</view>
				<view class="value">1</view>
			</view>
			<view class="flex1">
				<view class="subheading">今日营收</view>
				<view class="value">2233.00</view>
			</view>
			<view class="flex1">
				<view class="subheading">外卖订单</view>
				<view class="value">33</view>
			</view>
		</view>	
	</view>
	
	<view class="manageBtn flex-sb-c">
		<view class="Btn flex-sb-c">
			<view class="">
				<view class="name">商品管理</view>
				<view class="describe">管理我的商品</view>
			</view>
			<view class="iconLeft flex-c-c">
				<image class="icon" src="/static/logo.png" mode=""></image>
			</view>
			
		</view>
		<view class="Btn flex-sb-c">
			<view class="">
				<view class="name">分类管理</view>
				<view class="describe">新增分类</view>
			</view>
			<view class="iconRight flex-c-c">
				<image class="icon" src="/static/logo.png" mode=""></image>
			</view>
		</view>
	</view>
	
	<view class="">
		<view class="orderTitle flex-sb-c">
			<view class="name">最新订单</view>
			<view class="all">查看全部订单</view>
		</view>
		
		<view class="orderList">
			<view class="flex-sb-c pb30">
				<view class="orderTime">下单时间: 2021-04-05 21:09:10</view>
				<view class="orderType">外卖订单</view>
			</view>
			<view class="goodsInfo">
				<view class="goods">
					<image class="cover" src="/static/logo.png" mode=""></image>
					<view class="">
						<view class="name">三荤一素套餐</view>
						<view class="goodsNumber">商品数量: <text class="value">10</text></view>
					</view>
					
				</view>
				<view class="totalPrice">总计:￥<text class="number">10</text></view>
				
			</view>
			<view class="flex-sb-c">
				<view class="orderName">订单号:DD-20210405-0001</view>
				<view class="handleBtn flex-c-c">去处理</view>
			</view>
			
		</view>
		
	</view>
	
	
	
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		reactive,
		ref,
		getCurrentInstance,
	} from "vue";
	const {
		proxy
	} = getCurrentInstance()
</script>

<style lang="scss">
.header{
	padding:10rpx 30rpx;
}
.plaque{
	.logo{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: bold;
		color: #2C2C2C;
	}
}
.revenuePanel{
	width: 692rpx;
	height: 350rpx;
	background: linear-gradient(-29deg, #FF7C7C, #FF4C05);
	border-radius: 20rpx;
	margin: 30rpx auto 28rpx auto;
	position: relative;
	color:#fff;
	padding: 37rpx 20rpx 40rpx 36rpx;
	.see{
		position: absolute;
		line-height: 1;
		top: 37rpx;
		right: 20rpx;
		font-size: 22rpx;
	}
	.subheading{
		font-size: 22rpx;
		font-weight: bold;
	}
	.monthlyIncome{
		font-size: 70rpx;
	}
	.pr10{
		padding-right: 10rpx;
	}
	.index{
		position: absolute;
		bottom: 40rpx;
		width: 100%;
	}
	.value{
		font-size: 24px;
		margin-top: 4rpx;
	}
}
.manageBtn{
	padding:28rpx 30rpx;
	.Btn{
		width: 335rpx;
		height: 153rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		padding: 15rpx;
		.name{
			font-size: 30rpx;
			font-weight: bold;
			color: #363636;
			margin-bottom: 10rpx;
		}
		.describe{
			font-size: 22rpx;
			color: #949494;
		}
		.iconLeft{
			width: 90rpx;
			height: 90rpx;
			background: linear-gradient(140deg, #FF4040, #FFFFFF);
			opacity: 0.9;
			border-radius: 50%;
			.icon{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.iconRight{
			width: 90rpx;
			height: 90rpx;
			background:linear-gradient(140deg, #FEC85F, #EFDBCD);;
			opacity: 0.9;
			border-radius: 50%;
			.icon{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
}

.orderTitle{
	padding:0rpx 36rpx 30rpx 36rpx;
	.name{
		font-size: 40rpx;
		font-weight: bold;
		color: #363636;
	}
	.all{
		font-size: 22rpx;
		color: #949494;
	}
}
.orderList{
	width: 690rpx;
	height: 290rpx;
	background: #F5F5F5;
	border-radius: 20rpx;
	padding: 30rpx 20rpx 30rpx 30rpx;
	margin: 0rpx auto 30rpx auto;
	.cover{
		width: 100rpx;
		height: 100rpx;
		margin-right: 17rpx;
	}
	.goods{
		display: flex;
		 justify-content:flex-start;
		 align-items: flex-end;
		 .name{
			 font-size: 24rpx;
			 color: #000000;
			 margin-bottom: 14rpx;
			 font-weight: bold;
		 }
		 .goodsNumber{
			 font-size: 22rpx;
			 color: #2C2C2C;
			 .value{
				 color: #F76E15;
			 }
		 }
	}
	.handleBtn{
		width: 124rpx;
		height: 46rpx;
		background: #F76E15;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #EFEFEF;
	}
	.orderTime{
		font-size: 20rpx;
		color: #949494;
	}
	.orderName{
		font-size: 20rpx;
		color: #949494;
	}
	.orderType{
		font-size: 24rpx;
		color: #2C2C2C;
	}
	.pb30{
		padding-bottom: 30rpx;
	}
	.goodsInfo{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom:30rpx ;
		.totalPrice{
			font-size: 22rpx;
			color: #2C2C2C;
			.number{
				font-size: 30rpx;
				color: #F76E15;
			}
		}
		
	}
}

</style>
